<template>
  <div class="about">
    <h1 v-for="(item, index) in tempArr" :key="index">{{item.name}}-{{$filters.currencyUSD(item.id)}}</h1>
    <HelloWorld :msg="aa"></HelloWorld>
    <div v-for="item in arrThree" :key="item.id">{{item.name}}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, provide } from 'vue'
export default defineComponent({
    setup () {
        provide('geolocation', {
            longitude: 90,
            latitude: 135
        })
        const data: any = reactive({
            arr: ['D','E','F','G','I','U','K'],
            tempArr: [],
            aa: {
                title: '121',
                year: 12
            },
            res: {
                datas: {
                    name: '12'
                },
                page: 1,
                pageSize: 10
            },
            arrThree: [
                {
                    id: 1,
                    father_id: 0,
                    status: 1,
                    name: '生命科学竞赛',
                    _child: [
                    {
                        id: 2,
                        father_id: 1,
                        status: 1,
                        name: '野外实习类',
                        _child: [
                            { 
                                id: 3, 
                                father_id: 2, 
                                status: 1, 
                                name: '植物学' 
                            }
                        ],
                    },
                    {
                        id: 7,
                        father_id: 1,
                        status: 1,
                        name: '科学研究类',
                        _child: [
                        { id: 8, father_id: 7, status: 1, name: '植物学与植物生理学' },
                        { id: 9, father_id: 7, status: 1, name: '动物学与动物生理学' },
                        { id: 10, father_id: 7, status: 1, name: '微生物学' },
                        { id: 11, father_id: 7, status: 1, name: '生态学' },
                        ],
                    },
                    { id: 71, father_id: 1, status: 1, name: '添加' },
                    ],
                },
                {
                    id: 56,
                    father_id: 0,
                    status: 1,
                    name: '考研相关',
                    _child: [
                    { id: 57, father_id: 56, status: 1, name: '政治' },
                    { id: 58, father_id: 56, status: 1, name: '外国语' },
                    ],
                },
            ]
        });

        function mapFun() {
            data.arr.map((item: string, index: number) => {
                data.tempArr.push({
                    name: item,
                    id: index + 1
                })
            })
            console.log(data.tempArr);
        } 
        onMounted(() => {
            mapFun()
            const { page, pageSize, ...datas} = data.res;
            console.log(page);
            console.log(pageSize);
            console.log(datas);
            
        })
        return {
            ...toRefs(data)
        }
    }
})
</script>

